<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Metamorphosis Design Free Css Templates</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
		<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" />


<!-- Pirobox setup and styles end-->
		
    </head>
    <body>
        <div id="top_header">
            <div id="logo">
                <p><a href="#">MyDesign</a></p>
                <small class="small_logo"><a href="#">small slogan goes here</a></small>
            </div>
            <div id="link_bar">
                <ul>
                    <li><a href="#"><img src="images/link1.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link2.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link3.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link4.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link5.png" alt="" title="img"/></a></li>
                </ul>
            </div>
            <div id="header_border_top"></div>
        </div>
        <div id="menu_bg">
            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="portfolio.html"  class="active">Portfolio</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.html">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="header_bottom">
            <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. </p>
        </div>
        <div class="header_bor_bot">
            <div class="start_now"><a href="#">start now!</a></div>
        </div>

        <div id="content">
            <div id="portfolio_box">

               <div class="portfolio"><h2>Recently Completed Projects</h2></div>
                <div class="con_bg_top"></div>
                <div class="col_bg">
                    <div class="col_grad_bot">
                        <div class="col_grad_top">
                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_undersea.jpg" class="pirobox_gallery" title="Gallery Image 1"><img class="img_bor" src="pic/pic-04.jpg" alt="" title="pic-01" /></a>
                                <p>Nam non sem magna. Nam nec orci vel erat sollicitudin lacinia vitae eget ipsum. Vivamus dui </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_landscape.jpg" class="pirobox_gallery" title="Gallery Image 2"><img class="img_bor" src="pic/pic-05.jpg" alt="" title="pic-01" /></a>
                                <p>Nam nec orci vel erat sollicitudin lacinia vitae eget ipsum. Vivamus dui magna, sodales eu porta tristique </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a  href="images/metamorph_coffee.jpg" class="pirobox_gallery" title="Gallery Image 3"><img class="img_bor" src="pic/pic-06.jpg" alt="" title="pic-01" /></a>
                                <p>Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed</p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_contrast.jpg" class="pirobox_gallery" title="Gallery Image 4"><img class="img_bor" src="pic/pic-07.jpg" alt="" title="pic-01" /></a>
                                <p>Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet sem </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_simpleblue.jpg" class="pirobox_gallery" title="Gallery Image 5"><img class="img_bor" src="pic/pic-08.jpg" alt="" title="pic-01" /></a>
                                <p>Curabitur gravida eros sit amet sem euismod dignissim. Nam non sem magna. Nam nec orci vel erat</p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_lamp.jpg" class="pirobox_gallery" title="Gallery Image 6"><img class="img_bor" src="pic/pic-09.jpg" alt="" title="pic-01" /></a>
                                <p>Nam nec lacinia vitae eget ipsum. Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_bubblesonblue.jpg" class="pirobox_gallery" title="Gallery Image 7"><img class="img_bor" src="pic/pic-10.jpg" alt="" title="pic-01" /></a>
                                <p>Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_bluegrass.jpg" class="pirobox_gallery" title="Gallery Image 8"><img class="img_bor" src="pic/pic-11.jpg" alt="" title="pic-01" /></a>
                                <p>Nam non sem magna. Nam nec orci vel erat sollicitudin lacinia vitae eget ipsum. Vivamus dui </p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                            <div class="project_box">
                                <div class="link_center"><a href="#">Project Name Goes Here</a></div>
                                <a href="images/metamorph_redtight.jpg" class="pirobox_gallery" title="Gallery Image 9"><img class="img_bor" src="pic/pic-12.jpg" alt="" title="pic-01" /></a>
                                <p>Nam nec orci vel erat sollicitudin lacinia vitae eget ipsum. Vivamus dui magna, sodales eu porta tristique</p>
                                <a href="#">http://www.somewebsite.com</a>
                            </div>

                        </div>
                        <div style="clear: both"></div>
                    </div>
                </div>
                <div class="con_bg_bot"></div>
            </div>
            <div class="con_white_hr"></div>
            <div class="column_box">
                <div class="col1">
                    <h2>Get Free Quote</h2>
                    <div id="log">
                        <form id="form1" method="post" action="#">
                            <fieldset>
                                <label for="text1">Name: (Required) </label><br />
                                <input id="text1" type="text" name="text1" value="" alt=""/><br />
                                <label for="text2">Email Address: (Required)</label><br />
                                <input id="text2" type="text" name="text2" value="" alt=""/><br />
                                <label for="text2">Message: (Required) </label><br />
                                <textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
                                <input type="submit" id="login-submit" value="Send"/>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="col2">
                    <h2>Our Contact Info</h2>
                    <p class="bg_black">Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet sem euismod dignissim. </p>
                    <h2>Our Partner's Links</h2>
                    <ul class="ul_bot">
                         <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a></li>
         <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                                    <li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
									<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
                    </ul>
                </div>

                <div class="col3">
                    <h2>Recent Projects</h2>
                    <a href="images/metamorph_lighting.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-02.jpg" alt="" title="pic-01" /></a>
                    <a href="images/metamorph_ball.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-03.jpg" alt="" title="pic-01" /></a>
                </div>
            </div>
            <div class="con_white_hr"></div>
        </div>


        <div id="footer">
            <p>Copyright  2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p><!-- end of copyright notice-->
        </div>

    </body>
</html>
